import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/Home.vue'),
        meta: { title: '首页'}
    },
    {
        path: '/category/:cate',
        name: 'category',
        component: () => import('../views/Home.vue'),
        meta: { title: '分类', params: 'cate'}
    },
    {
        path: '/search/:words',
        name: 'search',
        component: () => import('../views/Home.vue'),
        meta: { title: '搜索', params: 'words'}
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('../views/About.vue'),
        meta: { title: '关于'}
    },
    {
        path: '/friend',
        name: 'friend',
        component: () => import('../views/Friend.vue'),
        meta: { title: '友链'}
    },
    {
        path: '/timeline',
        name: 'timeline',
        component: () => import('../views/Timeline.vue'),
        meta: { title: '时间线'}
    },
    {
        path: '/article/:id',
        name: 'article',
        component: () => import('../views/Article.vue'),
        meta: { title: '文章'}
    },
    {
        path: '/article/editor/:id',
        name: 'editor',
        component: () => import('../components/ArticleEdit.vue'),
        meta: { title: '修改文章'}
    },
    {
        path: '/login',
        name: 'Login',
        component: () => import('../views/login/index.vue'),
        meta: { title: '登陆'}
    },
    // {
    //     path: '/oauth2/callback/qq',
    //     name: 'qqCallback',
    //     component: () => import('../views/oauth/qqCallback.vue'),
    //     meta: { title: 'QQ登录成功后回调'}
    // },
    // {
    //     path: '/oauth2/callback/gitee',
    //     name: 'qqCallback',
    //     component: () => import('../views/oauth/giteeCallback.vue'),
    //     meta: { title: 'Gitee登录成功后回调'}
    // },
    {
        path: '/oauth2/callback/:platform',
        name: 'qqCallback',
        component: () => import('../views/oauth/oauthCallback.vue'),
        meta: { title: 'Gitee登录成功后回调'}
    },
    {
        path: '/login/bindUser',
        name: 'bindUser',
        component: () => import('../views/login/bindUser.vue'),
        meta: { title: '绑定账号'}
    },
    {
        path: '/userinfo',
        name: 'userinfo',
        component: () => import('../views/user/userinfo.vue'),
        meta: { title: '绑定账号'}
    }

]

const router = new VueRouter({
    // mode: 'hash',  //hash模式的工作原理是hashchange事件，可以在window监听hash的变化。
    mode: 'history', 
    base: process.env.BASE_URL,
    routes
})
router.beforeEach((to, from, next) => {
    let title = 'Gblog'
    if (to.meta.params){
        title = `${to.meta.title}:${to.params[to.meta.params] || ''} - ${title}`
    }else {
        title = `${to.meta.title} - ${title}`
    }
    document.title = title
    store.dispatch('app/setLoading', true);
    next();
})
router.afterEach((to, from) => {
    // 最多延迟 关闭 loading
    setTimeout(() => {
        store.dispatch('app/setLoading', false);
    }, 1500)
})
export default router
